<template>
  <div class="head-nav">
    <div class="logo">
      <router-link to="/"><img src="../assets/logo.png" alt="" /></router-link>
    </div>
    <ul class="head-list">
      <router-link tag="li" to="/" class="items">首页</router-link>
      <router-link tag="li" to="/host" class="items">主持人</router-link>
      <router-link tag="li" to="/addMain" class="items">加入我们</router-link>
      <router-link tag="li" to="/about" class="items">关于</router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HeadBar",
};
</script>

<style lang="less" scoped>
.head-nav {
  display: flex;
  align-items: center;
  height: 80px;
  .logo {
    width: 120px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .head-list {
    font-size: 26px;
    margin-left: 50px;
    .items {
      float: left;
      font-size: 20px;
      height: 36px;
      line-height: 36px;
      width: 80px;
      margin: 0 20px;
      text-align: center;
      color: #fff;
      width: 120px;
      text-align: center;
      box-sizing: border-box;
      border-radius: 10px;
    }
    .router-link-exact-active {
      border-radius: 10px;
      color: #fff;
      border: 2px solid #fff;
      line-height: 31px;
    }
  }
}
</style>